<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学业表现测评</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico">

    <!-- App css -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/app.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .col-form-label-ljt {
            padding-top: calc(.55rem + 1px);
            padding-bottom: calc(.25rem + 1px);
            margin-left: 16px;
            margin-bottom: 0;
            font-weight: bold;
            font-size: inherit;
            line-height: 1.5;
        }
    </style>

</head>

<body>

<!-- Begin page -->
<div id="wrapper">

    <!-- ========== Left Sidebar Start ========== -->
    <div th:replace="commons/sideBar :: sidebar"/>
    <!-- Left Sidebar End -->


    <div class="content-page">
        <div class="content">

            <!-- Topbar Start -->
            <div th:replace="commons/topBar :: topbar "/>
            <!-- end Topbar -->

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                                    <li class="breadcrumb-item active">突出表现</li>
                                    <li class="breadcrumb-item active">创造能力</li>
                                </ol>
                            </div>
                            <h4 class="page-title">创造能力</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
            </div>


            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->
            <div class="">
                <div class="card-body">
                    <h4 class="mb-3 header-title">测评内容：</h4>

                    <form class="form-horizontal">
                        <button class="btn btn-info  " id="add_btn" style="margin-bottom: 10px">添加选项</button>
                        <button class="btn btn-info  " id="del_btn"
                                style="margin-bottom: 10px;background-color: #ee324d">删除选项
                        </button>
                        <div id="item">


                            <!--                            <div class="form-group row mb-3 " >-->
                            <!--                                <label  class=" col-form-label-ljt">加分项:</label>-->
                            <!--                                <select name=""  class="form-control selItems"style="width: 200px;  height: 43px;margin-left: 15px" required></select>-->
                            <!--                                <label  class=" col-form-label-ljt">级别:</label>-->
                            <!--                                <select name="" class="form-control selLevels"style="width: 90px;  height: 43px;margin-left: 15px"  required> </select>-->
                            <!--                                <label  class=" col-form-label-ljt">分值:</label>-->
                            <!--                                <select disabled='disabled' name=""  class="form-control selPoints"style="width: 80px;  height: 43px;margin-left: 15px" required></select>-->
                            <!--                                <label  class=" col-form-label-ljt">证明材料:</label>-->
                            <!--                                <div style="width: 190px ;margin-left: 15px">-->
                            <!--                                    <input type="file" class="form-control" style="width: 220px;">-->
                            <!--                                </div>&lt;!&ndash;上传图片&ndash;&gt;-->
                            <!--                                <div style="margin-left: 45px;padding-top: 8px">-->
                            <!--                                    <span class="badge badge-danger float-right" style="font-size: 12pt">未提交</span>-->
                            <!--                                </div>-->
                            <!--                                <div style="margin-left: 45px;padding-top: 8px">-->
                            <!--                                    <i class="fe-trash-2" ></i>-->
                            <!--                                </div>-->
                            <!--                            </div>每一项&ndash;&gt;-->

                        </div>


                        <div class="form-group row mb-3">
                            <label for="subtotal" class="col-2 col-form-label">小计：</label>
                            <div class="col-9">
                                <input disabled="disabled" class="form-control" id="subtotal" style="width: 220px;"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="score" class="col-2 col-form-label">预计得分：</label>
                            <div class="col-9">
                                <input disabled="disabled" class="form-control" id="score" style="width: 220px;"
                                       placeholder="">
                            </div>
                        </div>


                        <div class="form-group mb-0 justify-content-end row">
                            <div class="col-9">
                                <button type="submit" class="btn btn-info  ">提交</button>

                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
</div>


<!-- Footer Start -->
<div th:replace="commons/footer :: foot"></div>
<!-- end Footer -->
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/layer/layer.js"></script>
<script>
    $("#del_btn").hide();

    //计数器
    function itemNum() {
        this.id = 1;
    }

    itemID = new itemNum();

    $("#del_btn").click(function (e) {
        var divItem = "#divItem" + itemID.id;
        // $("#item").remove(divItem);

        e.preventDefault();
        if (itemID.id == 1) {
            $("#del_btn").hide()
            return;
        }
        $(".itemList").last().remove()
        itemID.id = itemID.id - 1;
        if (itemID.id == 1) {
            $("#del_btn").hide()
        }

        addpoint()
    });

    $("#add_btn").click(function (e) {

            // $("#subtotal").attr("value","2");

            e.preventDefault();
            $("#del_btn").show();

            if (itemID.id > 10) {
                layer.msg("最多添加10项");
                return;
            } else {

                e.preventDefault();//阻止默认行为（表单提交）
                $("#item").append("<div class=\"form-group row mb-3 itemList\" id='divItem" + itemID.id + "'>\n" +
                    "                                <label  class=\" col-form-label-ljt\">" + itemID.id + ".加分项:</label>\n" +
                    "                                <select name=\"\"  class=\"form-control selItems\"style=\"width: 200px;  height: 43px;margin-left: 15px\" required></select>\n" +
                    "                                <label  class=\" col-form-label-ljt\">级别:</label>\n" +
                    "                                <select name=\"\" class=\"form-control selLevels\"style=\"width: 110px;  height: 43px;margin-left: 15px\"  required> </select>\n" +
                    "                                <label  class=\" col-form-label-ljt\">分值:</label>\n" +
                    "                                <select disabled='disabled' name=\"\" id='divSelect" + itemID.id + "' class=\"form-control selPoints\"style=\"width: 80px;  height: 43px;margin-left: 15px\" required></select>\n" +
                    "                                <label  class=\" col-form-label-ljt\">证明材料:</label>\n" +
                    "                                <div style=\"width: 190px ;margin-left: 15px\">\n" +
                    "                                    <input type=\"file\" class=\"form-control\" style=\"width: 220px;\">\n" +
                    "                                </div><!--上传图片-->\n" +
                    "                                <div style=\"margin-left: 45px;padding-top: 8px\">\n" +
                    "                                    <span class=\"badge badge-danger float-right\" style=\"font-size: 12pt\">未提交</span>\n" +
                    "                                </div>\n" +
                    "                            </div><!--每一项-->"
                );
                itemID.id = itemID.id + 1;
                add_bind_op()
                // alert(itemID.id)

            }
            // initbind()
            addpoint()
            // if (itemID.id=="2"){
            //
            //     // alert(itemID.id)
            //     $("#subtotal").val("2");
            //     $("#score").val("0.5")
            // }
            if (itemID.id == "1") {
                $("#subtotal").val("2");
                $("#score").val("0.5");
            }

        }
    );


    $(document).delegate(".fe-trash-2", "click", function () {
        $(this).parent().parent().remove();
        addpoint()
    })


</script>


<!-- App js -->
<script src="./js/vendor.js"></script>
<script src="./js/app.js"></script>


<!-- Plugins js -->
<script src="./js/vendor/Chart.bundle.js"></script>
<script src="./js/vendor/jquery.sparkline.min.js"></script>
<script src="./js/vendor/jquery.knob.min.js"></script>

<script src="./js/pages/dashboard.init.js"></script>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/outstands/creativeAbilitySelectLinkage.js"></script>
<script>
    var failedNum = 8;
    var myselect = document.getElementsByClassName(".form-control selPoints");
    var index = myselect.selectedIndex;
    failedNum = myselect.options[0].text();
    document.getElementById("failedNum-ljt").value = "abcd";

    $("#failedNum-ljt").val("11");
</script>
</body>
</html>